import React from "react";
import pingPP from "pingpp-js";
import {fetchGETWithoutHeader, reset} from "../../actions";
import {connect} from "react-redux";

class chuiPayment extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            token: "",
            amount: 0,
            prizeIds: "",
            counts: 0,
            sysType: "",
            chargeType: "",
            charge: "",
            callback: "",
            firstClick: true,
            display: "none"
        }
    }

    componentWillMount() {
        document.title = "支付";
    }

    componentDidMount() {
        const query = this.props.location.query;
        if(query.token) {
            this.setState({
                token: query.token,
                amount: query.money,
                callback: query.callbackUrl
            })
        }
        this.props.dispatch(reset("dingPayCharge"))
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.paymentData.errorCode == 0) {
            this.goPay(nextProps.paymentData.data);
        } else {
            this.setState({
                firstClick: true
            });
        }
    }

    generateCharge() {
        if(this.state.firstClick) {
            this.setState({
                display: ""
            })
            let params = "?userToken=" + this.state.token + "&amount=" + this.state.amount + "&payType=3&callbackUrl=" + this.state.callback;
            this.props.dispatch(fetchGETWithoutHeader("dingPayCharge", params));
            this.setState({
                firstClick: false
            });
        }
    }

    goPay(charge) {
        this.setState({
            firstClick: true
        });
        pingPP.createPayment(charge, function(result, err) {
        });
        this.props.dispatch(reset("dingPayCharge"))
    }
    render() {
        return (
            <div>
                <div className="dingPayContainer">
                    <div className="payList">
                        <ul>
                            <li> 需支付 <i>{this.state.amount}元</i></li>
                        </ul>
                    </div>
                    <div className="payList">
                        <ul>
                            <li><span className="logo"></span>支付方式：支付宝 <i className="gou"></i> </li>
                        </ul>
                    </div>
                    <div className="tips" style={{'display': this.state.display}}>
                        支付中,请稍等...
                    </div>
                    <div className="buttonBox bgf"><button className="blueBtn2" onClick={this.generateCharge.bind(this)} >去支付</button></div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    const {postsByApi} = state
    const {
        items: paymentData
    } = postsByApi["dingPayCharge"] || {
        items: {}
    }

    return {
        paymentData
    }
}

export default connect(mapStateToProps)(chuiPayment);